import { PlusOutlined } from '@ant-design/icons';
import { ModalForm, ProFormDigit, ProFormSwitch, ProFormText } from '@ant-design/pro-components';
import { Button, DatePicker, Form, Input, Space, Table } from 'antd';
import React, { useEffect, useState } from 'react';
import styles from './serialNumber.less';
const Search = Input.Search;
const RangePicker = DatePicker.RangePicker;
const FormItem = Form.Item;
const LAYOUT_TYPE_HORIZONTAL = 'horizontal';

import { getSerialNumberByPage } from '@/services/system/serialNumber';

const columns = [
  {
    title: '编码',
    dataIndex: 'code',
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }) => {
      return (
        <div style={{ padding: 8 }} onKeyDown={(e) => e.stopPropagation()}>
          <Input
            placeholder="请查询"
            value={selectedKeys[0]}
            onChange={(e) => {}}
            onPressEnter={() => {}}
            style={{ marginBottom: 8, display: 'block' }}
          />
        </div>
      );
    },

    onFilter: (value, record) => record.name.indexOf(value) === 0,
    sorter: (a, b) => a.name.length - b.name.length,
  },
  {
    title: '名称',
    dataIndex: 'name',
    sorter: (a, b) => a.age - b.age,
  },
  {
    title: '编码位数',
    dataIndex: 'codeCnt',
    filters: [
      {
        text: '南湖',
        value: '南湖',
      },
      {
        text: '西湖',
        value: '西湖',
      },
    ],
    filterMultiple: false,
    onFilter: (value, record) => record.address.indexOf(value) === 0,
    sorter: (a, b) => a.address.length - b.address.length,
  },
  {
    title: '链接符号',
    dataIndex: 'linkSymbol',
  },

  {
    title: '操作',
    valueType: 'option',
    key: 'option',

    render: (_, record) => (
      <Space size="middle">
        <a>修改</a>
        <a>删除</a>
      </Space>
    ),
  },
];

const columns2 = [
  {
    title: '类型',
    dataIndex: 'type',
    filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }) => {
      return (
        <div style={{ padding: 8 }} onKeyDown={(e) => e.stopPropagation()}>
          <Input
            placeholder="请查询"
            value={selectedKeys[0]}
            onChange={(e) => {}}
            onPressEnter={() => {}}
            style={{ marginBottom: 8, display: 'block' }}
          />
        </div>
      );
    },

    onFilter: (value, record) => record.name.indexOf(value) === 0,
    sorter: (a, b) => a.name.length - b.name.length,
  },
  {
    title: '规则',
    dataIndex: 'rule',
    sorter: (a, b) => a.age - b.age,
  },
  {
    title: '排序',
    dataIndex: 'sort',
    filters: [
      {
        text: '南湖',
        value: '南湖',
      },
      {
        text: '西湖',
        value: '西湖',
      },
    ],
    filterMultiple: false,
    onFilter: (value, record) => record.address.indexOf(value) === 0,
    sorter: (a, b) => a.address.length - b.address.length,
  },
  {
    title: '是否随时间变化',
    dataIndex: 'followDate',
  },

  {
    title: '操作',
    valueType: 'option',
    key: 'option',

    render: (_, record) => (
      <Space size="middle">
        <a>修改</a>
        <a>删除</a>
      </Space>
    ),
  },
];

function onChange(pagination, filters, sorter) {
  // 点击分页、筛选、排序时触发
  console.log('各类参数是', pagination, filters, sorter);
}

const SerialNumber: React.FC<{}> = (props) => {
  const [isBackgroundColorSwitched, setIsBackgroundColorSwitched] = useState(false);
  const toggleBackgroundColor = () => {
    setIsBackgroundColorSwitched(!isBackgroundColorSwitched);
  };

  const [formLayoutType, setFormLayoutType] = useState<FormLayout>(LAYOUT_TYPE_HORIZONTAL);
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const [loading, setLoading] = useState(false);
  const [row, setRow] = useState({});
  const [rows, setRows] = useState([]);
  const [form] = Form.useForm();
  const [grid, setGrid] = useState(true);

  const [mainVisit, setMainVisit] = useState(false);
  const [mainTitle, setMainTitle] = useState('新建');

  const [form2] = Form.useForm();
  const [mainVisit2, setMainVisit2] = useState(false);
  const [mainTitle2, setMainTitle2] = useState('新建');

  const handleSubmit = (values) => {
    setLoading(true);
    let result = getSerialNumberByPage({
      current: 1,
      pageSize: 20,
      ...values,
    }).then((res) => {
      setRows(res.data.content);
      setLoading(false);
      console.log(res, '--res---');
    });
  };

  const mainSubmit = (values) => {
    console.log(values, '---values---');
  };

  const mainSubmit2 = (values) => {
    console.log(values, '---values---');
  };

  useEffect(() => {
    let result = getSerialNumberByPage({
      current: 1,
      pageSize: 20,
    }).then((res) => {
      setRows(res.data.content);
      console.log(res, '--res---');
    });
  }, []);

  return (
    <div className={styles.father}>
      <div className={styles.top}>
        <div style={{ height: '20%', overflow: 'auto' }}>
          <Button
            type="primary"
            icon={<PlusOutlined />}
            onClick={() => {
              setMainTitle('新建');
              setMainVisit(true);
            }}
          >
            增加流水号
          </Button>
        </div>
        <div style={{ height: '80%', overflow: 'auto' }}>
          <Table
            headerTitle="流水号"
            size="small"
            columns={columns}
            sticky={true}
            tableStyle={{ height: '10px' }}
            // headerStyle={{
            //   position: 'sticky',
            //   top: 0, // 距离顶部的距离
            //   zIndex: 999, // 确保标题栏在最上层
            // }}
            toolBarRender={(action, { selectedRows }) => [
              <Button
                key="button"
                icon={<PlusOutlined />}
                onClick={() => {
                  // console.log(selectedRows, '---选取多行----');
                  // 1.清空form
                  // userdispatch({ type: 'create' });
                  // form.resetFields();
                  //
                }}
                type="primary"
              >
                新建流水号
              </Button>,
            ]}
            // scroll={{ x: 1000, y: 1000 }}
            search={false}
            // dataSource={rows}
            rowKey="id"
            onRow={(record) => {
              return {
                onClick: () => {
                  setRow(record);
                  console.log(record, '----');
                },
              };
            }}
            onChange={onChange}
            rowClassName={(record) => {
              return row.id === record.id ? styles.backgroud : '';
            }}
            request={async (params, sort, filter) => {
              // const sorters = sortTran(sort);
              // const filters = filterTran(params);
              // console.log(sorters, filters, filter);
              const result = await getSerialNumberByPage({
                ...params,
              });

              console.log(result);
              return {
                data: result.data.content,
                total: result.data.totalElements,
                success: result.success,
              };

              // return  await new Promise({data:[{loginName:}], total:10, success: 0})
              // return {data:[], total:10, success: 0}
            }}
            // scroll={{ x: 1000, y: 100 }}
          />
        </div>
      </div>
      <div className={styles.bottom}>
        <div style={{ height: '20%', overflow: 'auto' }}>
          <Button
            type="primary"
            icon={<PlusOutlined />}
            onClick={() => {
              setMainVisit2(true);
              setMainTitle2('新建');
            }}
          >
            增加流水号子项
          </Button>
        </div>
        <div style={{ height: '80%', overflow: 'auto' }}>
          <Table
            size="small"
            columns={columns2}
            dataSource={rows}
            onChange={onChange}
            sticky={true}
          />
        </div>
      </div>

      <ModalForm
        visible={mainVisit}
        title={mainTitle}
        form={form}
        onFinish={mainSubmit}
        modalProps={{
          destroyOnClose: true,
          onCancel: () => {
            setMainVisit(false);
          },
        }}
        layout={formLayoutType}
        grid={grid}
        rowProps={{
          gutter: [16, formLayoutType === 'inline' ? 16 : 0],
        }}
      >
        <ProFormText name="id" label="id" placeholder="请输入名称" hidden={true} />
        <ProFormText
          name="code"
          label="编码"
          colProps={{ md: 12, xl: 12 }}
          rules={[{ required: true, message: '请输入编码' }]}
        />
        <ProFormText name="name" label="名称" colProps={{ md: 12, xl: 12 }} />
        <ProFormDigit name="codeCnt" label="编码位数" colProps={{ md: 12, xl: 8 }} />
        <ProFormText name="linkSymbol" label="链接符" colProps={{ md: 12, xl: 8 }} />
      </ModalForm>

      <ModalForm
        visible={mainVisit2}
        title={mainTitle2}
        form={form2}
        onFinish={mainSubmit2}
        modalProps={{
          destroyOnClose: true,
          onCancel: () => {
            setMainVisit2(false);
          },
        }}
        layout={formLayoutType}
        grid={grid}
        rowProps={{
          gutter: [16, formLayoutType === 'inline' ? 16 : 0],
        }}
      >
        <ProFormText name="id" label="id" placeholder="请输入名称" hidden={true} />
        <ProFormDigit
          name="type"
          label="类型"
          colProps={{ md: 12, xl: 12 }}
          rules={[{ required: true, message: '请输入编码' }]}
        />
        <ProFormText name="rule" label="名称" colProps={{ md: 12, xl: 12 }} />
        <ProFormDigit name="sort" label="编码位数" colProps={{ md: 12, xl: 8 }} />
        <ProFormSwitch name="followDate" label="是否随上层重置" />
      </ModalForm>
    </div>
  );
};

export default SerialNumber;
